<template>
	<div class="stepBarDiv">
		<div class="stepBar">
			<div class="stepDiv">
				<img v-if="step == 1" src="@/assets/image/stepBar/step1.png"></img>
				<img v-if="step == 2 || step == 3" src="@/assets/image/stepBar/stepFinish.png"></img>
				<div :class="step == 1 || step == 2 || step == 3 ? 'stepTitle stepTitleDone' : 'stepTitle'">
					{{flag? '帐号验证' : '信息认证'}}
				</div>
			</div>
			<div class="stepDiv">
				<img v-if="step == 2" src="@/assets/image/stepBar/step2.png"></img>
				<img v-if="step == 1" src="@/assets/image/stepBar/step2grey.png"></img>
				<img v-if="step == 3" src="@/assets/image/stepBar/stepFinish.png"></img>
				<div :class="step == 2 || step == 3 ? 'stepTitle stepTitleDone' : 'stepTitle'">
					{{flag? '设置新密码' : '创建用户'}}
				</div>
			</div>
			<div class="stepDiv">
				<img v-if="step == 1 || step == 2" src="@/assets/image/stepBar/step3grey.png"></img>
				<img v-if="step == 3" src="@/assets/image/stepBar/stepFinish.png"></img>
				<div :class="step == 3 ? 'stepTitle stepTitleDone' : 'stepTitle'">
					{{flag? '完成': '注册成功'}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "stepBar",
		props: {
			step: {
				type: Number
			},
			flag: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
.stepBarDiv {
  display: flex;
  justify-content: center;
  .stepBar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    border-bottom: 1px dashed #d9d9d9;
    overflow: hidden;
    .stepDiv {
      display: flex;
      justify-content: center;
      flex-direction: column;
      img {
        width: 250px;
        height: 42px;
      }
      .stepTitle {
        margin: 10px;
        font-size: 15px;
        color: #333333;
        &.stepTitleDone {
          color: #045db9;
        }
      }
    }
  }
}
</style>
